import { ref, onMounted, watch } from "vue";
export default  function getTodo() {
  const todos = ref([]);
  let draggingEle;
  //监听todos的变化，有变化和重新写入
  watch(
    todos,
    () => {
      localStorage.setItem("todoList", JSON.stringify(todos.value));
    },
    { deep: true }
  );

  //当组件挂载完成后要从本地存储中加载数据
  onMounted(() => {
    const todoList = localStorage.getItem("todoList");
    if (todoList) {
      todos.value = JSON.parse(todoList);
    }
  });
  //接受头部组件传递过来的数据并保存起来
  const handleTodoOfSend = (todo) => {
    todos.value.push(todo);
  };

  //修改todo的状态
  const handleToggle = (id) => {
    const toggle = todos.value.find((todo) => {
      return todo.id == id;
    });
    toggle.done = !toggle.done;
  };

  //删除todo,通过id
  const removeTodoById = (id) => {
    todos.value = todos.value.filter((todo) => {
      return todo.id != id;
    });
  };

  //修改内容
  const setContent = (id, value) => {
    const findRes = todos.value.find((todo) => {
      return todo.id == id;
    });
    findRes.content = value;
  };

  //将所有的todo的done设置为true
  const handleAllToDone = (state) => {
    todos.value = todos.value.map((todo) => {
      todo.done = state;
      return todo;
    });
  };

  //清除所有已办
  const clearDone = () => {
    todos.value = todos.value.map((todo) => {
      todo.done = false;
      return todo;
    });
  };

  //清除所有
  const clearAll = () => {
    todos.value = [];
  };

  //开始拖拽
  const dragStart = (e) => {
    draggingEle = e.target;
  };

  //拖拽过程中
  const dragOver = (e) => {
    e.preventDefault();
  };
  //拖拽的li在目标li上触发的事件
  const drop = (e) => {
    e.preventDefault();

    if (draggingEle !== e.target) {
      let target = e.target;
      while (true) {
        if (target.tagName === "LI") {
          break;
        }
        target = target.parentNode;
      }
      const startIndex = todos.value.findIndex((item) => {
        return item.id == draggingEle.getAttribute("drag-id");
      });
      const endIndex = todos.value.findIndex((item) => {
        return item.id == target.getAttribute("drag-id");
      });
      const temp = todos.value[startIndex];
      todos.value.splice(startIndex, 1, todos.value[endIndex]);
      todos.value.splice(endIndex, 1, temp);
      console.log(123456);
    }
  };
  return {
    todos,
    draggingEle,
    handleTodoOfSend,
    handleToggle,
    removeTodoById,
    setContent,
    handleAllToDone,
    clearDone,
    clearAll,
    dragStart,
    dragOver,
    drop
  }
};
